<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>论坛社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.css"/>
    <link rel="stylesheet" href="/css/forum.css"/>
    <link rel="stylesheet" href="/css/editormd.min.css">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/js/forum.js"></script>
    <script src="/js/moment.js"></script>
    <script src="/js/editormd.min.js"></script>
    <script src="/js/lib/marked.min.js"></script>
    <script src="/js/lib/prettify.min.js"></script>
    <link rel="stylesheet" href="/publish/js/lib/codemirror/codemirror.min.css">
    <script src="/publish/js/lib/codemirror/codemirror.min.js"></script>
    <link rel="stylesheet" href="/publish/js/lib/codemirror/addon/dialog/dialog.css">
    <link rel="stylesheet" href="/publish/js/lib/codemirror/addon/search/matchesonscrollbar.css">
</head>
<body>
<div th:insert="~{navigation::nav}"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-9  col-sm-9 col-xs-9">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发起</h2>
            <hr>
            <form action="/publish" method="post">
                <input type="hidden" name="id" th:value="${id}">
                <div class="form-group">
                    <label for="title">问题标题(简单扼要):</label>
                    <input name="title" autocomplete="off" th:value="${title}" type="text" class="form-control" id="title" placeholder="问题标题...">
                </div>
                <div class="form-group"  id="question-editor">
                    <label for="title">问题补充 (必填，请参照右侧提示): </label>
                    <textarea name="description" th:text="${description}"
                              style="display: none" class="form-control" rows="10"></textarea>
                </div>
                <script type="text/javascript">
                    $(function() {
                        var editor = editormd("question-editor", {
                            width  : "100%",
                            height : 350,
                            path   : "js/lib/",
                            delay: 0,
                            watch: false,
                            imageUpload: true,
                            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                            imageUploadURL: "/file/upload",
                        });
                    });
                </script>
                <div class="form-group">
                    <label for="title">添加标签: </label>
                    <input th:value="${tag}" autocomplete="off"
                           type="text" class="form-control" id="tag"
                           name="tag" placeholder="输入标签以','分隔"
                            onclick="showSelectTag()">
                    <div id="select-tag" class="publish-tag-tab">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" th:each="selectCategory:${tags}"
                                    th:class="${selectCategoryStat.first?'active':''}">
                                <a th:href="${'#'+selectCategory.categoryName}" aria-controls="home"
                                   role="tab" data-toggle="tab" th:text="${selectCategory.categoryName}">
                                </a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content" style="margin-top: 5px">
                            <div role="tabpanel" th:each="selectCategory:${tags}"
                                 th:id="${selectCategory.categoryName}"
                                 th:class="${selectCategoryStat.first?'active tab-pane':'tab-pane'}">
                            <span class="label label-info" th:each="selectTag:${selectCategory.tags}">
                                <span onclick="selectTag(this)" th:data-tag="${selectTag}"
                                      th:text="${selectTag}">
                                </span>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="alert alert-danger" role="alert" th:text="${error}" th:if="${error!=null}"></div>
                <button type="submit" class="btn btn-success btn-publish">发布</button>
            </form>
        </div>


        <div class="col-lg-3 col-md-3  col-sm-3 col-xs-3">
            <h3>问题发起指南</h3>
            • 问题标题: 请用精简的语言描述您发布的问题，不超过25字<br><br>
            • 问题补充: 详细补充您的问题内容，并确保问题描述清晰直观, 并提供一些相关的资料：<br><br>
            <div>       1.服务器运行环境信息;</div>
            <div>       2.软件版本；</div>
            <div>       3.问题发生的上下文信息;</div>
            <div>       4.补充完整的异常和错误信息；</div>
            <div>       5.注意阅读格式友好，代码和异常信息请用代码标签格式化张贴；</div><br><br>
            • 选择标签: 选择一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字
        </div>
    </div>
</div>
<div th:insert="~{footer::foot}"></div>
</body>
</html>